<template>
    <div class="video-preView" v-loading="isLoading">
        <span class="video-tree">
            <div class="video-tree-input">
                <el-input placeholder="搜索监控通道"></el-input><el-button type="primary">搜索</el-button>
            </div>
            <!-- <div class="video-device">
                <span class="video-sum-device">设备总数：13台</span
                ><span class="video-device-list">
                    <div style="color: #70B603">在线：10台</div>
                    <div style="color: #D9001B">异常：2台</div>
                    <div style="color: #999">离线：1台</div>
                </span>
            </div> -->
            <div class="monitor-ul">
                <div @click="monitorBtn(item)" :class="monitorId == item.camera_id ? 'monitor-item-active':'monitor-item'" v-for="(item, $index) in monitorList" :key="this">{{item.name}}</div>
            </div>
            <!-- <el-tree 
                :data="data"
                highlight-current
                @node-click="handleNodeClick"
            ></el-tree> -->
        </span
        ><span id="video-play" class="video-play">
            <video
                id="videoView"
                ref="videoView"
                class="video-js
                vjs-default-skin
                vjs-big-play-centered"
                
                preload="true">
                <source src="rtmp://218.92.33.126:21935/vod/openUrl/LgaXIpW" type="rtmp/flv">
            </video>
        </span>
    </div>
</template>
<script>
    import videojs from "video.js"
    import 'video.js/dist/video-js.css'
    import 'videojs-flash'
    import SWF_URL from 'videojs-swf/dist/video-js.swf'
    export default {
        props: {
            name: {
                type: String
            }
        },
        data () {
            return {
                isLoading: false,
                monitorList: [],
                monitorId: '',
                options: {
                    playbackRates: [0.5, 1.0, 1.5, 2.0], //播放速度
                    // controls: false,
                    autoplay: true, //如果true,浏览器准备好时开始回放。
                    muted: true, // 默认情况下将会消除任何音频。
                    loop: false, // 导致视频一结束就重新开始。
                    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    language: 'zh-CN',
                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    techOrder: ['flash', 'html5'],      // 兼容顺序
                    flash: {
                        swf: SWF_URL
                    },
                    // application/x-mpegURL
                    // hls
                    // rtmp/flv
                    sources: { // 流配置，数组形式，会根据兼容顺序自动切换
                        type: 'rtmp/flv',
                        src: 'rtmp://58.200.131.2:1935/livetv/cctv1'
                    },
                    poster: "", //你的封面地址
                    // width: document.documentElement.clientWidth,
                    notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    controlBar: {
                        // timeDivider: true,
                        // durationDisplay: true,
                        // remainingTimeDisplay: false,
                        // fullscreenToggle: true  //全屏按钮
                    }
                },
                player: null,
                videoSrc: ''
            }
        },
        watch: {
            'name': function() {
                if(this.name === 'second') {
                    if (this.player != null){
                        this.player.dispose();
                        this.player = null;
                    }
                }
            }
        },
        created() {
            this.isLoading = true;
            this.$http.get('api/v1/security/monitor')
            .then((res) => {
                this.monitorList = res.data;
                this.isLoading = false;
            })
            .catch(() => {})
        },
        methods: {
            init() {
                var myVideoDiv = document.getElementById("video-play")
                // myVideoDiv.innerHTML = "<video id='videoView' ref='videoView' class='video-js vjs-default-skin vjs-big-play-centered' preload='auto'></video>";
                this.player = videojs('videoView', this.options, function() {
                    this.on("loadstart",function(){
                        console.log("开始请求数据 ");
                    })
                    this.on("progress",function(e){
                        console.log("正在请求数据 ");
                    })
                    this.on("loadedmetadata",function(){
                        console.log("获取资源长度完成 ")
                    })
                    this.on("canplaythrough",function(){
                        console.log("视频源数据加载完成")
                    })
                    this.on("waiting", function(){
                        console.log("等待数据")
                    });
                    this.on("play", function(){
                        console.log("视频开始播放")
                    });
                    this.on("playing", function(){
                        console.log("视频播放中")
                    });
                    this.on("pause", function(){
                        console.log("视频暂停播放")
                    });
                    this.on("ended", function(){
                        console.log("视频播放结束");
                    });
                    this.on("error", function(){
                        console.log("加载错误")
                    });
                    this.on("seeking",function(){
                        console.log("视频跳转中");
                    })
                    this.on("seeked",function(){
                        console.log("视频跳转结束");
                    })
                    this.on("ratechange", function(){
                        console.log("播放速率改变")
                    });
                    this.on("timeupdate",function(){
                        console.log("播放时长改变");
                    })
                    this.on("volumechange",function(){
                        console.log("音量改变");
                    })
                    this.on("stalled",function(){
                        console.log("网速异常");
                    })
                    this.on('error', function(err) {
                        videojs.log(err);
                    })
                })
                this.player.play();
            },
            monitorBtn(item) {
                this.monitorId = item.camera_id;
                this.isLoading = true;
                this.$http.get(`/api/v1/security/monitor_playback?start_time=2020-09-05 21:52:00&end_time=2020-09-08 21:55:00&camera_id=08e9d686734d4df29f5ea0e2773b7755`)
                .then((res) => {
                    this.isLoading = false;
                    if(this.player) {
                        this.player.dispose();
                    }
                    this.options.sources.src = res.data.url;
                    this.init();
                })
                .catch(() => {})
                // this.$http.get(`api/v1/security/monitor?camera_id=${item.camera_id}`)
                // .then((res) => {
                //     this.isLoading = false;
                //     if(this.player) {
                //         this.player.dispose();
                //     }
                //     this.options.sources.src = 'rtmp://218.92.33.126:21935/vod/openUrl/maJMFs4';
                //     this.init();
                // })
                // .catch(() => {})
            }
        },
        destroyed() {
            if(this.player) {
                this.player.dispose();
                this.player = null;
            }
        }
    }
</script>
<style lang="scss" scoped>
    .video-preView {
        display: flex;
        width: 100%;
        height: 100%;
        overflow: hidden;
        .video-tree {
            width: 300px;
            display: inline-block;
            vertical-align: top;
            height: 100%;
            overflow: auto;
            .video-tree-input {
                display: flex;
            }
            .video-device {
                width: 100%;
                display: flex;
                align-items: center;
                border: 1px solid #e5e5e5;
                box-sizing: border-box;
                .video-sum-device {
                    padding: 0 12px;
                    box-sizing: border-box;
                }
                .video-device-list {
                    border-left: 1px solid #e5e5e5;
                    box-sizing: border-box;
                    padding: 6px 0 ;
                    &>div {
                        padding: 6px 12px;
                        box-sizing: border-box;
                    }
                }
            }
            .monitor-ul {
                width: 100%;
                .monitor-item, .monitor-item-active {
                    width: 100%;
                    padding: 8px 24px;
                    box-sizing: border-box;
                    cursor: pointer;
                }
                .monitor-item-active {
                    color: #409EFF;
                }
            }
            ::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
                color: #409EFF;
            }
        }
        .video-play {
            width: calc(100% - 300px);
            overflow: auto;
            padding-left: 20px;
        }
    }
</style>